<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这是页面</h1>
<!--<button id="btn">点击</button>-->
<!--//写一个表单-->
<form action="/upload/file" method="post" enctype="multipart/form-data">
    姓名<input type="text" name="username"/><br>
    密码<input type="text" name="password"/><br>
    文件 <input type="file" name="file"/><br>
    <button>提交</button>
</form>
<div id="app">
<!--&lt;!&ndash;    //我们先把上半部分的el-table拉到index.html文件中，并做相应修改&ndash;&gt;-->
<!--    <el-table-->
<!--            :data="tableData"-->
<!--            stripe-->
<!--            style="width: 100%">-->
<!--        <el-table-column-->
<!--                prop="name"-->
<!--                label="姓名"-->
<!--                width="180">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--                prop="age"-->
<!--                label="年龄"-->
<!--                width="180">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--                prop="gender"-->
<!--                label="性别">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--                prop="clazz"-->
<!--                label="班级">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--                prop="sumScore"-->
<!--                label="总分">-->
<!--        </el-table-column>-->
<!--    </el-table>-->
    <h1>文件上传</h1>
<!--    <el-upload-->
<!--            class="avatar-uploader"-->
<!--            action="/upload/fileOss"-->
<!--            :show-file-list="false"-->
<!--            :on-success="handleAvatarSuccess"-->
<!--            :before-upload="beforeAvatarUpload">-->
<!--        <img v-if="imageUrl" :src="imageUrl" class="avatar" name="imges">-->
<!--        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--    </el-upload>-->

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="上传">
            <el-upload
                    class="avatar-uploader"
                    action="/upload/fileOss"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
<button @click="downFile">点击下载</button>
</div>
</body>
</html>
<script src="jquery.js"></script>
<script src="vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script>-->
<!--    document.getElementById('btn').onclick = function () {-->
<!--        console.log(1)-->
<!--    }-->
<!--</script>-->

<script>
    new Vue({
        //这里的#app是jquery的语法，#表示查找id，那么#app就是取到上面<div id="app">这个标签
        el: '#app',
        data:{
            //在这个data后面加上上面表格需要展示的数据
            tableData: [],//先定义tableData的类型--list
            imageUrl: '',
            form: {
                name: '',
                region: '',
                imageUrl:'',
            }
        },
        //这边还可以加上created()方法，在它初始化的时候会默认调用这个方法
        created(){
            // $.get("http://localhost:8080/stu").then(res=>{
            //     //这里面是赋值操作
            //     this.tableData=res.data;
            // })
            // $("#btn").text("点击111")
            // $.get("http://localhost:8080/upload/file").then(res=>{
            //     console.log(res);
            // })
            //使用post传递username
            // $.post("http://localhost:8080/upload/filePost",{username:"张三"}).then(res=>{})
        },
        methods:{
            handleAvatarSuccess(res, file) {
                console.log("res",res);
                console.log("file", file)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            onchangeFile(file){
                // 自定义上传函数，用于并发上传
                // const formData = new FormData();
                // formData.append('file', option.file);

                // 可以在这里添加其他参数
                // formData.append('name', 'file');
            },
            onSubmit() {
                console.log('form',this.form)
                console.log('submit!');
            },
            downFile(){
                //后端放回的是文件下载的url
                //window.open("https://java-upload-test.oss-cn-guangzhou.aliyuncs.com/exampledir/exampleobject.jpg?x-oss-date=20251107T084203Z&x-oss-expires=3599&x-oss-signature-version=OSS4-HMAC-SHA256&x-oss-credential=LTAI5tM1JYib3BPpwBfxPBkn%2F20251107%2Fcn-guangzhou%2Foss%2Faliyun_v4_request&x-oss-signature=f3411690cab982f151d4ae3544f9fdc81d5d0d38c0f1a467d675ce2f05a58d58")
               //创建a标签下载
                var a = document.createElement('a');
                a.href = "https://java-upload-test.oss-cn-guangzhou.aliyuncs.com/exampledir/exampleobject.jpg?x-oss-date=20251107T084203Z&x-oss-expires=3599&x-oss-signature-version=OSS4-HMAC-SHA256&x-oss-credential=LTAI5tM1JYib3BPpwBfxPBkn%2F20251107%2Fcn-guangzhou%2Foss%2Faliyun_v4_request&x-oss-signature=f3411690cab982f151d4ae3544f9fdc81d5d0d38c0f1a467d675ce2f05a58d58";
                a.download = "exampleobject.jpg";
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
            }
        }
    })
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>